<template>
  <div class="main">
    <div><van-nav-bar title="历史借阅" fixed /></div>
    <div class="main-history">
      <van-swipe-cell
        v-for="item in book"
        :key="item.id"
        style="margin-top: 2px"
      >
        <van-card
          :key="item.id"
          :tag="item.bookType"
          :price="item.bookPrice"
          :desc="item.bookAuthor"
          :title="item.bookName"
          :thumb="item.image"
          ><template #tags>
            <van-tag plain type="success">{{ item.createTime }}</van-tag>

            <van-tag plain :type="typeDefine(item)" style="margin-left: 1mm">{{
              item.endTime == null ? "未归还" : item.endTime
            }}</van-tag>
          </template></van-card
        >
        <template #right>
          <van-button
            square
            :text="textDefine(item)"
            :type="typeDefine(item)"
            class="delete-button"
            @click="returnHistory(item)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <div class="page">
      <van-pagination
        v-model="page"
        :total-items="sum"
        :show-page-size="3"
        :items-per-page="size"
        force-ellipses
        @change="changePage"
      />
    </div>
    <van-tabbar v-model="active">
      <van-tabbar-item replace to="/main" icon="wap-home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/borrow" icon="new-o">借书</van-tabbar-item>
      <van-tabbar-item replace to="/history" icon="records"
        >历史借阅</van-tabbar-item
      >
      <van-tabbar-item replace to="/personal" icon="user-circle-o"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { historyBorrow, returnBook } from "@/api/historyApi";
export default {
  data() {
    return {
      active: 2,
      page: 1,
      size: 5,
      sum: 6,
      book: {
        id: "",
        personalId: "",
        bookId: "",
        bookName: "",
        bookType: "",
        bookAuthor: "",
        bookPrice: "",
        image: "",
        createTime: "",
        endTime: "",
      },
    };
  },
  methods: {
    typeDefine(item) {
      return item.endTime == null ? "danger" : "success";
    },
    textDefine(item) {
      return item.endTime == null ? "还书" : "完成";
    },
    returnHistory(history) {
      if (history.endTime == null) {
        this.$Modal.confirm({
          title: "还书",
          content: "你确认归还此书吗?",
          onOk: () => {
            returnBook(history).then((res) => {
              if (res) {
                this.$Message.success("还书成功!");
                window.setTimeout(function () {
                  window.location.reload();
                }, 1000);
              } else {
                this.$Message.error("还书错误,请联系管理员");
              }
            });
          },
          onCancel: () => {
            this.$Message.info("取消还书成功!");
          },
        });
        console.log("还书成功");
        console.log(history);
      } else {
        this.$Message.error("当前书目已归还！");
      }
    },
    changePage() {
      historyBorrow({
        username: localStorage.getItem("username"),
        page: this.page,
        size: this.size,
      }).then((res) => {
        console.log(res);
        this.sum = res.total;
        this.book = res.data;
      });
    },
  },
  created() {
    localStorage.removeItem("type");
    localStorage.removeItem("name");
    historyBorrow({
      username: localStorage.getItem("username"),
      page: this.page,
      size: this.size,
    }).then((res) => {
      console.log(res);
      this.sum = res.total;
      this.book = res.data;
    });
  },
};
</script>

<style>
.main {
  background-color: antiquewhite;
  width: 100%;
  height: 100%;
  position: fixed;
}
.main-history {
  margin-top: 13%;
}

.delete-button {
  height: 100%;
}
</style>
